<?php //debug($groups); ?>
<form id='list_form' action="<?php echo $this->Html->url(array('action' => 'broadcast_list_create')); ?>" method="post" class='form form-horizontal'>
    <div class='panel'>
        <div class="panel-body">
            <div class='form-group'>
                <div class="col-lg-2 control-label">
                    List Name:
                </div>
                <div class='col-lg-10 controls'>
                    <input name="ModuleSmsBroadcastList[name]" type='text' required='' class='form-control input-sm input-s-lg' value='<?php echo isset($broadcast_list) ? $broadcast_list['name'] : ''; ?>' />
                    <input name='ModuleSmsBroadcastList[module_sms_account_id]' type='hidden' value='<?php echo $account['account_id']; ?>' />
                    <input name='ModuleSmsBroadcastList[id]' type='hidden' value='<?php echo isset($broadcast_list) ? $broadcast_list['id'] : ''; ?>' />
                    <input name='ModuleSmsBroadcastList[type]' type='hidden' value='<?php echo isset($broadcast_list) ? $broadcast_list['type'] : 'custom'; ?>' />
                </div>
            </div>

            <div class='form-group'>
                <div class="col-lg-2 control-label">
                    Sender ID:
                </div>
                <div class='col-lg-10 controls'>
                    <input type='text' id='sender_id' name='ModuleSmsBroadcastList[sender_id]' required="" placeholder='Sender ID' maxlength="11" class='form-control input-sm input-s-sm' value='<?php echo isset($broadcast_list) ? $broadcast_list['sender_id'] : $account['sender_id']; ?>' />
                </div>
                <div class='col-lg-2'>&nbsp;</div>
                <div class='col-lg-10'>
                    <p class='text-xs text-muted m-t-sm'>
                        <i class='fa fa-info-circle'></i> 
                        Sender ID is the name displayed on the members phone when messages are received from this list. 
                        It must be a maximum  of <b>11 alphanumeric characters</b> and cannot have spaces.
                    </p>
                </div>
            </div>
            
            <div class='form-group'>
                <div class="col-lg-2 control-label">
                    
                </div>
                <div class='col-lg-10 controls form-inline'>
                    <div class='alert alert-info p-xs m-b-xs'>
                        Results will include members who match ALL required filter conditions, and ANY who
                        match optional conditions.
                    </div>
                </div>
            </div>

            <div class='form-group'>
                <div class="col-lg-2 control-label">
                    Filter(s):
                </div>
                <div class='col-lg-10 controls form-inline'>
                    <div class="row">
                        <div class='col-lg-10' id="filter-group">
                            <p class='text-sm font-bold b-b m-b-sm'>Required Filters</p>
                            <div class='group required m-b'></div>
                            
                            <p class='text-sm font-bold b-b m-b-sm'>Optional Filters</p>
                            <div class='group optional m-b'></div>
                        </div>

                        <div class='col-lg-2'>
                            <!--<button id="add_filter_btn" type='button' class='btn btn-sm btn-white'><i class="fa fa-plus"></i> Add Filter</button>-->
                            <div class="btn-group" id="add_filter_btn">
                                <button class="btn btn-white btn-sm dropdown-toggle" data-toggle="dropdown">
                                    <i class='fa fa-plus'></i> Add Filter <!--<span class="caret"></span>-->
                                </button>
                                <ul class="text-sm dropdown-menu pull-right" style="min-width: 100px;">
                                  <li><a id='required' href="#">Required</a></li>
                                  <li><a id='optional' href="#">Optional</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-lg-2 control-label">
                    Query Example:
                </div>
                
                <div class="col-lg-10 text-sm p-t-sm" id="filter_query_sample">
                    &nbsp;
                </div>
            </div>
        </div>

        <div class="panel-footer">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-2">
                    <button type="submit" id='list_form_submit' class="btn btn-sm btn-info"><i class='fa fa-list'></i> Create List</button>
                    <button type="button" class="btn btn-sm btn-white">Cancel</button>
                    
                    <?php 
                    if( isset($broadcast_list) ) { ?>
                        <span class='m-l-lg'>&nbsp; &nbsp;</span>
                        <a href='<?php echo $this->Html->url(array('action' => 'broadcast_list_contacts', 'custom', $broadcast_list['id'])); ?>' type='button' class='btn btn-sm btn-warning m-l-lg' id='preview_list_btn'>
                            <i class='fa fa-eye'></i> Preview List (<?php echo $broadcast_list['size']; ?>)
                        </a>
                        <?php
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/template" id="filter-template">
    <div class='filter m-b-sm'>
        <select required='' name='ModuleSmsBroadcastListFilter[{d}][field]' class='form-control input-sm input-s filter-field'>
            <option value=''>Select Field</option>
            <optgroup label="Member Profile">
                <option value="OrganisationMember.organisation_member_category_id">Member Category</option>
                <option value="Member__full_name">Name</option>
                <option value="Member.gender">Gender</option>
                <option value="Member.marital_status">Marital Status</option>
                <option value="MemberPhoneNumber.number">Phone Number</option>
                <option value="MemberEmail.email">Email</option>
                <option value="Member.occupation">Occupation</option>
                <option value="Member__age">Age</option>
                <option value="MONTHNAME(Member.dob)">Birth Month</option>
                <option value="DAYNAME(Member.dob)">Birth Day Of Week</option>
            </optgroup>

            <optgroup label="Group">
                <?php foreach($groups as $group) { ?>
                    <option required="" data-type-id='<?php echo $group['OrganisationGroupType']['id']; ?>' value="group_type_id_<?php echo $group['OrganisationGroupType']['id']; ?>">
                        <?php echo $group['OrganisationGroupType']['name']; ?>
                    </option>
                <?php } ?>
            </optgroup>
        </select>

        <select required="" name='ModuleSmsBroadcastListFilter[{d}][condition]' class='form-control input-sm input-s-sm filter-conditions'>
            <option value=''>Select Condition</option>
            <option value="=">Equals</option>\
            <option value="%{s}%">Contains</option>
            <option value="{s}%">Starts With</option>
            <option value="%{s}">Ends With</option>
            <option value=">">Greater Than</option>
            <option value=">=">Greater Than Or Equals</option>
            <option value="<">Less Than</option>
            <option value="<=">Less Than Or Equals</option>
        </select>

        <select required="" name='ModuleSmsBroadcastListFilter[{d}][value]' class='form-control input-sm input-s filter-value' style="display: none; width: 150px;">
            <option value=''>Select Value</option>
        </select>

        <input required="" type="text" name='ModuleSmsBroadcastListFilter[{d}][value]' class="form-control input-sm input-s filter-value" style='width: 150px;' />
        <input type="hidden" name='ModuleSmsBroadcastListFilter[{d}][id]' class="form-control input-sm input-s filter-id" />
        <input type="hidden" name='ModuleSmsBroadcastListFilter[{d}][optional]' value='{optional}' class="form-control input-sm input-s filter-optional" />
                    
        <button type='button' class='btn btn-xs btn-danger m-l filter-remove'><i class='fa fa-minus'></i></button>
    </div>
</script>

<script type='text/javascript'>
    <?php if( isset($broadcast_list) ) {
        echo "var filter_data = " . json_encode($broadcast_list['filters']) . ";";
    }
    else {
        echo 'var filter_data = [];';
    }
    ?>
    
    var group_select = {};
    
    <?php 
    $cat_data = array();
    foreach($categories as $category) {
        $cat_data[$category['category']['id']] = $category['category']['name'];
    } 
    echo "var category_select = " . json_encode($cat_data) . "; \n";
    ?>
    
    <?php 
    foreach($groups as $type) {
        $type_id = $type['OrganisationGroupType']['id'];
        $data = array();
        
        foreach($type['OrganisationGroup'] as $group) {
            $data[$group['id']] = $group['name'];
        }
        
        echo "group_select[$type_id] = " . json_encode($data) . "; \n";
    } 
    ?>
</script>

